<template>
  <!-- recommend vue prop sort
  is v-for v-if v-else-if v-else v-show v-cloak v-pre v-once id ref key slot v-model all-normal-props v-bind v-on v-html v-text-->
  <div>
    <div class="banner linear-bg-blue">
      <img :src="logo" mode="aspectFill" class="logo" />
      <div class="info">
        <p class="content">{{account.shopName}}</p>
        <p class="content">营业时间: {{hours}}</p>
        <p class="content address">地址: {{account.province+account.city}}</p>
        <a href="/pages/mine/shop-info/deal/main" class="myDeal">我的协议</a>
      </div>
    </div>
    <i-cell-group>
      <i-cell title="店铺名称" is-link url="/pages/mine/shop-info/name/main">
        <span slot="footer" class="list-value">{{account.shopName}}</span>
      </i-cell>
      <i-cell title="店铺LOGO" is-link @click="handleChangeLogo">
        <img slot="footer" :src="logo" mode="aspectFill" class="small-logo" />
      </i-cell>
      <i-cell
        title="店铺简介"
        is-link
        url="/pages/mine/shop-info/introduction/main"
      >
        <span slot="footer" class="list-value">{{account.description}}</span>
      </i-cell>
      <!-- 21090916 new add start-->
      <i-cell
        v-for="(item,index) in list"
        :key="index"
        :title="item.name"
        @click="linkClick(item)"
        is-link
      ></i-cell>
      <!-- 21090916 new add end-->

      <i-cell title="电话" is-link url="/pages/mine/shop-info/tel/main">
        <span slot="footer" class="list-value">{{account.servicePhone1}}</span>
      </i-cell>
      <i-cell title="邮编" is-link url="/pages/mine/shop-info/zip-code/main">
        <span
          slot="footer"
          class="list-value"
        >{{account.shopZip ? account.shopZip : '无'}}</span>
      </i-cell>
      <i-cell title="地址" is-link url="/pages/mine/shop-info/address/main">
        <span
          slot="footer"
          class="list-value"
        >{{account.province ? account.province+account.city : '无'}}</span>
      </i-cell>
      <i-cell
        title="营业时间"
        is-link
        url="/pages/mine/shop-info/business-hours/main"
      >
        <span slot="footer" class="list-value">每天{{hours}}</span>
      </i-cell>
      <i-cell
        title="宝主身份"
        is-link
        url="/pages/mine/shop-info/merchant/index/main"
      >
        <span slot="footer" class="commercial">
          <!-- <span>销</span> -->
          {{kindObj[shopKind]}}
        </span>
      </i-cell>
      <i-cell title="缴费升级" is-link @click="updateGradeClick">
        <span slot="footer" class="commercial">
          <!-- <span>销</span> -->
          {{shopIdentity}}
        </span>
      </i-cell>

      <!-- <i-cell
        v-for="(item,idx) in list"
        :key="idx"
        :title="item.name"
        is-link
        :url="item.url"
      >
        <span v-if="!item.img" slot="footer" class="list-value">{{item.value}}</span>
        <img
          v-else
          slot="footer"
          :src="item.img"
          mode="aspectFill"
          class="small-logo"
        >
      </i-cell>-->
    </i-cell-group>
  </div>
</template>

<script>
import {} from '@/utils'
import {
  UPLOAD_SHOP_LOGO,
  UPDATE_SHOP_BASE_INFO,
  FIND_SHOP_BASE_INFO
} from '@/api'

export default {
  components: {},
  props: {},
  data () {
    return {
      shopIdentity: '',
      identity: '',
      shopKind: '',
      kindObj: {
        DEALER: '兜货商',
        SUPPLIER: '供应商'
      },
      account: {}
    }
  },
  computed: {
    logo () {
      return this.$store.state.logo
    },
    // shopIdentity () {
    //   let shopIdentity = this.$cookie.get('account').shopIdentity
    //   if (shopIdentity === 'ENTITY') {
    //     return '实业宝'
    //   } else if (shopIdentity === 'VIRTUAL') {
    //     return '网商宝'
    //   } else {
    //     return '创业宝'
    //   }
    // },
    hours () {
      return [
        this.$store.state.startServiceTime,
        this.$store.state.endServiceTime
      ]
        .map(_ => _.replace(/(^0|:00$)/g, ''))
        .join('-')
    },
    /* address () {
      return this.account.province + this.account.city
    },
    list () {
      return [
        {
          name: '店铺名称',
          value: this.account.shopName,
          url: '/pages/mine/shop-info/name/main'
        },
        {
          name: '店铺LOGO',
          img: this.account.logo,
          url: '/pages/mine/shop-info/logo/main'
        },
        {
          name: '店铺简介',
          value: this.account.description,
          url: '/pages/mine/shop-info/introduction/main'
        },
        {
          name: '电话',
          value: this.account.servicePhone1,
          url: '/pages/mine/shop-info/tel/main'
        },
        {
          name: '邮编',
          value: this.account.shopZip,
          url: '/pages/mine/shop-info/zip-code/main'
        },
        {
          name: '地址',
          value: this.address,
          url: '/pages/mine/shop-info/address/main'
        },
        {
          name: '营业时间',
          value: '每天' + this.hours,
          url: '/pages/mine/shop-info/business-hours/main'
        }
      ]
    } */
    list () {
      let arr = [
        {
          name: '店铺二维码',
          url: '/pages/mine/shop-config/qr-code-shop/main',
          isLink: this.shopIdentity === 'PERSONAL'
        },
        {
          name: '店铺小链接',
          url: '/pages/mine/shop-config/url/main',
          isLink: this.shopIdentity === 'PERSONAL'
        },
        {
          name: '公众号配置',
          url: '/pages/mine/shop-config/public-num/main',
          isLink: false
        },
        {
          name: '开通支付',
          url: '/pages/mine/shop-config/open-payment/main',
          isLink: false
        }
      ]
      return arr
    }
  },
  watch: {
    // account: {
    //   handler: function (val, oldVal) {
    //     console.log(val)
    //   },
    //   deep: true
    // }
  },
  created () {},
  mounted () {},
  onShow () {
    this.init()
    this.getShopIdentity()
  },
  methods: {
    updateGradeClick () {
      const vm = this
      let customerId = vm.$cookie.get('account').customerId
      let mobile = vm.$cookie.get('account').phone
      vm.$router.push(
        `/pages/new-open-shop/index/main?customerId=${customerId}&mobile=${mobile}&LinkIdentity=UPGRADE&identity=${
          vm.identity
        }`
      )
    },
    handleChangeLogo () {
      this.uploadLogo()
      // this.updateLogo()
    },
    uploadLogo () {
      const vm = this

      UPLOAD_SHOP_LOGO()
        .then(r => {
          let res = JSON.parse(r.data)
          if (res.code === '0') {
            vm.updateLogo(res.data.imgPath)
          } else {
            vm.$toast(res.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    },
    updateLogo (logo) {
      const vm = this

      let params = {
        shopId: vm.$cookie.get('account').shopId,
        logo
      }

      UPDATE_SHOP_BASE_INFO(params)
        .then(r => {
          if (r.data.code === '0' && r.data.data) {
            vm.$toast('操作成功')
            vm.$store.commit('SET_ACCOUNT_INFO', { logo })
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    },
    getShopIdentity () {
      const vm = this
      FIND_SHOP_BASE_INFO(vm.$cookie.get('account').shopId).then(r => {
        if (r.data.code === '0') {
          let shopIdentity = r.data.data.shopIdentity
          vm.identity = r.data.data.shopIdentity
          if (shopIdentity === 'ENTITY') {
            vm.shopIdentity = '实业宝'
          } else if (shopIdentity === 'VIRTUAL') {
            vm.shopIdentity = '网商宝'
          } else {
            vm.shopIdentity = '创业宝'
          }
        } else {
          vm.$toast(r.data.message)
        }
      })
    },
    linkClick (item) {
      const vm = this
      if (!item.isLink) {
        vm.$router.push(`${item.url}`)
      } else {
        vm.$toast('请先开通实体店')
      }
    },
    init () {
      const vm = this
      vm.$cookie.remove('upgrade-shop-customerId')

      vm.shopKind = vm.$cookie.get('account').shopKind

      let obj = this.$cookie.get('account') || this.$store.state.account
      if (obj.description) {
        if (obj.description.length > 20) {
          obj.description = `${obj.description.substring(0, 20)}...`
        }
      }
      vm.account = obj
    }
  }
}
</script>

<style lang="scss" scoped>
@import 'static/styles/color.scss';

.banner {
  padding-top: 30px;
  display: flex;
  align-items: center;
  font-size: 15px;
  > .logo {
    width: 60px;
    height: 60px;
    border-radius: 50%;
  }
  > .info {
    padding-left: 15px;
    display: inline-flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    .address {
      width: 200px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .myDeal {
      position: absolute;
      bottom: 0;
      right: -80px;
      display: block;
      padding: 1px 4px;
      color: #fff;
      border: 1px solid #fff;
      border-radius: 5px;
      font-size: 12px;
    }
  }
}
.i-cell {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.list-value {
  color: $gray;
}
.commercial {
  // color: #259b24;
  color: red;
  display: flex;
  align-items: center;
  span {
    width: 20px;
    height: 20px;
    color: #fff;
    background: #e51c23;
    border-radius: 6px;
    display: block;
    text-align: center;
    line-height: 20px;
    margin-right: 5px;
  }
}
.small-logo {
  height: 20px;
  width: 20px;
  display: block;
  border-radius: 50%;
}
</style>
